<!DOCTYPE html>
<style>
div:before { position: absolute; content: 'x';  }
</style>
<!--
<img usemap="#map1">
  <map>
    <caption>
      <map name=child-map>
        yz
      </map>
    </caption>
  </map>
-->
<script>
window.addEventListener('load', () => {
  const caption = document.createElement('caption');
  const childMap = document.createElement('map');
  childMap.setAttribute('name', 'child-map');
  const map2 = document.createElement('map');
  document.documentElement.appendChild(map2);
  const img = document.createElement('img');
  img.setAttribute('usemap', '#child-map');
  childMap.appendChild(document.createTextNode('yz'));
  document.documentElement.appendChild(img);
  caption.appendChild(childMap);
  map2.appendChild(caption);
});
</script>
